<template>


  <van-swipe class="my-swipe" indicator-color="white" loop :autoplay="5000">
    <van-swipe-item v-for="(story, index) in top_stories" :key="index" @click="gotoArticle(story.id)">
      <img :src="story.image" :alt="story.title" class="cover">
      <div class="info">
        <h1 class="title">{{ story.title }}</h1>
        <div class="hint">{{ story.hint }}</div>
      </div>
    </van-swipe-item>


    <template #indicator="{ active, total }">
      <div class="custom-indicator">

        <div class="dot" v-for="(dot, index) in total" :key="index" :class="active === index ? 'active' : ''"></div>

      </div>
    </template>
  </van-swipe>
</template>


<script setup>

import { computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const props = defineProps({

  top_stories: {
    type: Array,
    default: () => []
  },


})


const top_stories = computed(() => props.top_stories);

const gotoArticle = (id) => {
  router.push({ path: `/article/${id}` })
};





</script>



<style scoped>
.van-swipe-item {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
  cursor: pointer;
}

.cover {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.info {
  position: absolute;
  bottom: 10px;
  left: 0;
  color: #fff;
  padding: 0 0 10px 20px;
}

.title {
  margin: 0;
  font-size: 18px;
  margin-bottom: 10px;
}

.hint {
  font-size: 14px;
  opacity: .8;
}

.custom-indicator {
  position: absolute;
  right: 20px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  /* 圆点之间的间距 */
}

.dot {
  width: 5px;
  height: 5px;
  background-color: #ebedf0;
  border-radius: 50%;
  opacity: 0.5;
}

.dot.active {
  width: 15px;
  /* 胶囊形状的宽度 */
  height: 5px;
  /* 高度与圆点相同，确保胶囊形状看起来更自然 */
  background-color: white;
  opacity: 1;
  border-radius: 15px;
  /* 边界半径设置为高度的一半以形成胶囊形状 */
}
</style>
